<%@include file="menu/util.jsp" %>
<%@page contentType="text/html; charset=iso-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="map" value="${requestScope.map}" />
<c:set var="drawing" value="${requestScope.drawing}" />
<c:set var="top" value="${requestScope.top}" />
<c:set var="left" value="${requestScope.left}" />
<c:set var="semaphores" value="${requestScope.semaphores}" />
<c:set var="dimensionalCutsMembers" value="${requestScope.dimensionalCutsMembers}" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <fmt:bundle basename="app">
        <head>
            <title><fmt:message key="login.title.tag" /></title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <jsp:include page="../jsp/menu/header.jsp" />
            <style type="text/css">
                body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
                h2{font-size:13px; margin:15px 0 0 0;}
            </style>
            <link href="jsp/css/screen.css" type="text/css" rel="stylesheet" />
            <script type="text/javascript">
                $(document).ready(function(){
                    $("#settings").colorbox({ width:"640px", height:"440px", iframe:true });
                    $(".drag").click(function(){
                        var id = $(this).parent().attr("id");
                        $("#scores").append($("#"+id));
                        $("#"+id).css("z-index","1");
                        $("input[name=left-"+id+"]").val(0);
                        $("input[name=top-"+id+"]").val(0);
                        $("#scores li.scoresemaphore").draggable(draggableSettings);
                    });
                    
                    $("#reset").click(function(){
                        $("#scores li").each(function(){
                            $(this).attr("style", "");
                            var id = $(this).attr("id");
                            $("#scoreToolbar").append($("#"+id));
                        });
                        $("#scores li").each(function(){
                            $(this).remove();
                        });
                        $("#scoreToolbar li").each(function(){
                            var id = $(this).attr("id");
                            $(this).removeClass("mapped");
                            $("input[name=left-"+id+"]").val(-1000);
                            $("input[name=top-"+id+"]").val(-1000);
                        });
                    });
                    $("#scores li").dblclick(function(){
                        $(this).attr("style", "");
                        var id = $(this).attr("id");

                        $(this).removeClass("mapped");

                        $("input[name=left-"+id+"]").val(-1000);
                        $("input[name=top-"+id+"]").val(-1000);
                        $("#scoreToolbar").append($("#"+id));
                    });
                    var draggableSettings = {
                        cursor: 'move',
                        containment: '#scores',
                        drag: function(event, ui){
                            $(this).addClass("mapped");
                        },
                        stop: function(event, ui){
                            var id = $(this).attr("id");
                            $("#"+id).css("z-index","1");
                            $("input[name=left-"+id+"]").val($(this).position().left);
                            $("input[name=top-"+id+"]").val($(this).position().top);
                        },
                        handleDrop: function(event, ui){

                            var id = $(this).attr("id");
                            $("#"+id).css("z-index","1");
                            $("input[name=left-"+id+"]").val($(this).position().left);
                            $("input[name=top-"+id+"]").val($(this).position().top);
                        }
                    };
                    $("#scores li.scoresemaphore").draggable(draggableSettings);
                });
            </script>
        </head>
        <body>
            <div class="demo content">
                <jsp:include page="../jsp/menu/headerDesign.jsp">
                    <jsp:param name="hideMenu" value="${true}" />
                </jsp:include>
                <div id="contentContainer" class="settings box1 container_16" style="height:585px;">

                    <div id="titleHeader">
                        <span class="name" style="width:65%;">${map.name}</span>
                        <form method="post" action="mapDesigner.do?mapId=${map.idScoreCard}" id="mapDesignerForm" style="width:35%;">
                            <c:forEach items="${semaphores}" var="semaphore">
                                <input type="hidden" name="semaphores" value="${semaphore.idScoreCard}" />
                                <input type="hidden" name="left-${semaphore.idScoreCard}" value="${left[semaphore]}" />
                                <input type="hidden" name="top-${semaphore.idScoreCard}" value="${top[semaphore]}" />
                            </c:forEach>
                            <span style="position:relative;bottom:7px;">
                                <input id="reset" type="button" class="designerWizardInput" value="Reset" />
                                <input type="submit" class="designerWizardInput" value="Guardar" />
                                <input onclick="window.location = 'mainDesigner.do';" type="button" class="designerWizardInput" value="Cancelar" />
                            </span>

                        </form>
                    </div>
                    <div id="leftBar" class="box1" style="width:240px; float:left;">
                        <div class="accordionHeader" style="width:230px">
                            <span>ScoreCards</span>
                        </div>
                        <div style="height:500px;overflow-y:auto;overflow-x:hidden;">
                            <ul id="scoreToolbar" style="position:relative;">
                                <c:forEach items="${semaphores}" var="semaphore">
                                    <c:if test="${top[semaphore] < 0 && left[semaphore] < 0}">
                                        <li class="scoresemaphore ui-draggable" id="${semaphore.idScoreCard}">
                                            <span title="agregar al dibujo" class="drag ui-icon ui-icon-arrowstop-1-e"></span>
                                            <div class="modal">

                                                <c:choose>
                                                    <c:when test="${semaphore.class.simpleName == 'DimensionalCut'}">
                                                        <c:set var="dimensionalCutMembers" value="${dimensionalCutsMembers[semaphore]}" />
                                                        ${semaphore.pointer.name} (${dimensionalCutMembers})
                                                    </c:when>
                                                    <c:otherwise>${semaphore.name}</c:otherwise>
                                                </c:choose>

                                            </div>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                    <div id="container" class="graphview" style="float:right; width:725px; height:543px; margin-top: -8px; overflow:hidden;left: 0px;position: relative;">
                        <div id="scorecontainer" style="background-image:url(${drawing.file}); width:725px; height:543px;">
                            <ul id="scores" class="items designerScores" style="width:725px; height:543px; padding:0px;">
                                <c:forEach items="${semaphores}" var="semaphore">
                                    <c:if test="${top[semaphore] >= 0 && left[semaphore] >= 0}">
                                        <li class="scoresemaphore" id="${semaphore.idScoreCard}" style="top:${top[semaphore]}px;  left:${left[semaphore]}px; ">
                                            <span title="agregar al dibujo" class="drag ui-icon ui-icon-arrowstop-1-e"></span><div class="modal">${semaphore.name}</div>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </div>
                <jsp:include page="../jsp/menu/footer.jsp" />
            </div>
        </body>
    </fmt:bundle>
</html>